<template>
  <div class="orderManagement-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">新增</el-button>
        <el-button type="primary" @click="handleSubmit" :disabled="multiple">
          <vab-icon :icon="['fas', 'check']"></vab-icon>
          提交
        </el-button>
        <el-button type="primary" @click="handleRevoke" :disabled="multiple">
          <vab-icon :icon="['fas', 'times']"></vab-icon>
          撤回
        </el-button>
        <!-- <el-button type="primary" @click="handleAudit" :disabled="single">
          <vab-icon :icon="['fas', 'chess-pawn']"></vab-icon>
          审核
        </el-button> -->
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input v-model.trim="queryForm.docCode" placeholder="请输入单据号" clearable style="width: 150px" />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="daterange"
              type="daterange"
              placeholder="选择日期"
              start-placeholder="开始单据日期"
              end-placeholder="结束单据日期"
              :default-time="['00:00:00', '23:59:59']"
              @change="changeDocDate"
              style="width: 300px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input v-model.trim="queryForm.clienteleName" placeholder="请输入客户名称" clearable style="width: 150px" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      class="table_list"
      ref="list"
      border
      v-loading="listLoading"
      highlight-current-row
      :data="list"
      :element-loading-text="elementLoadingText"
      @expand-change="handleExpandChange"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column show-overflow-tooltip align="center" min-width="50" type="selection"></el-table-column>
      <el-table-column show-overflow-tooltip align="left" min-width="150" prop="docCode" label="单据号">
        <template #default="{ row }">
          <el-link :underline="false" type="text" @click="handleDetail(row)">{{ row.docCode }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        align="center"
        min-width="100"
        prop="docDate"
        label="单据日期"
        :formatter="formatterDate"
      ></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="clienteleName" label="客户名称"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="salesman" label="销售人员"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="totalAmount" label="合计金额"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="status" label="状态">
        <template #default="{ row }">
          <el-tag type="warning" v-if="row.status == '6'">{{ $getDocStatus(row.status) }}</el-tag>
          <el-tag type="danger" v-else-if="row.status == '2' || row.status == '5'">{{ $getDocStatus(row.status) }}</el-tag>
          <el-tag type="primary" v-else-if="row.status == '1' || row.status == '0'">{{ $getDocStatus(row.status) }}</el-tag>
          <el-tag type="success" v-else>{{ $getDocStatus(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="100" prop="createdBy" label="创建人"></el-table-column>
      <el-table-column show-overflow-tooltip align="center" min-width="160" prop="createdTime" label="创建时间"></el-table-column>
      <el-table-column align="center" width="150" label="操作">
        <template #default="{ row }">
          <el-tooltip effect="dark" content="编辑当前行" placement="top">
            <el-button
              icon="el-icon-edit"
              type="primary"
              size="mini"
              circle
              @click="handleEdit(row)"
              :disabled="row.status != '0' && row.status != '2'"
            ></el-button>
          </el-tooltip>
          <!-- <el-tooltip effect="dark" content="查看明细" placement="top">
            <el-button icon="el-icon-view" type="primary" size="mini" circle @click="handleDetail(row)"></el-button>
          </el-tooltip> -->
          <el-tooltip effect="dark" content="查看明细" placement="top">
            <el-button type="primary" size="mini" circle @click="handleDetailHistory(row)">
              <vab-icon :icon="['fas', 'history']"></vab-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除当前行" placement="top">
            <el-button
              icon="el-icon-delete"
              type="danger"
              size="mini"
              circle
              @click="handleDelete(row)"
              :disabled="row.status != '0' && row.status != '2'"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <edit ref="edit" @fetch-data="fetchData"></edit>
    <detail ref="detail" @fetch-data="fetchData"></detail>
    <history-detail ref="history" @fetch-data="fetchData"></history-detail>
  </div>
</template>

<script>
  import { getList, doDelete, doSubmit, doRevoke } from '@/api/sales/order'
  import Edit from './components/Edit'
  import Detail from './components/Detail'
  import HistoryDetail from './components/HistoryDetail'

  export default {
    name: 'SalesOrder',
    components: { Edit, Detail, HistoryDetail },
    data() {
      return {
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          docCode: undefined,
          clienteleName: undefined,
          startTime: undefined,
          endTime: undefined,
        },
        daterange: [],
        selection: undefined,
        multipleSelection: undefined,
        single: true,
        multiple: true,
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      handleAudit() {
        this.$baseMessage('审核', 'success')
      },
      handleDetailHistory(row) {
        // this.$refs['detailHistory'].showEdit(row)
        this.$refs['history'].showEdit(row)
      },
      handleSubmit() {
        if (this.multipleSelection.length > 0) {
          let ids = this.multipleSelection.map((item) => item.orderId)
          this.$baseConfirm(`你确定要将这 ${ids.length} 条单据提交吗?`, null, async () => {
            await doSubmit({ ids: ids }).then((res) => this.callbackFun(res))
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      handleRevoke() {
        if (this.multipleSelection.length > 0) {
          let ids = this.multipleSelection.map((item) => item.orderId)
          this.$baseConfirm(`你确定要将这 ${ids.length} 条单据撤回吗?`, null, async () => {
            await doRevoke({ ids: ids }).then((res) => this.callbackFun(res))
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      changeDocDate(date) {
        if (date) {
          this.queryForm.startTime = this.$parseTime(date[0])
          this.queryForm.endTime = this.$parseTime(date[1])
        } else {
          this.queryForm.startTime = undefined
          this.queryForm.endTime = undefined
        }
      },
      callbackFun(res) {
        if (res.success) {
          this.$baseMessage(res.msg, 'success')
          this.fetchData()
        } else {
          this.$baseMessage(res.msg, 'error')
        }
      },
      formatterDate(row, column, cellValue, index) {
        return this.$parseTime(cellValue, '{y}-{m}-{d}')
      },
      handleSelectionChange(selection) {
        this.multipleSelection = selection
        this.selection = selection[0]
        this.single = selection.length != 1
        this.multiple = selection.length == 0
      },
      handleRowClick(row) {
        // this.$refs.list.clearSelection()
        this.$refs.list.toggleRowSelection(row)
      },
      handleExpandChange(row, expandedRows, expanded) {
        // 存在时加载子集数据
        if (expandedRows.includes(row)) {
          console.log('handleExpandChange')
        }
      },
      handleDetail(row) {
        this.$refs['detail'].showEdit(row)
      },
      handleEdit(row) {
        if (row.orderId) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDelete(row) {
        if (row) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            await doDelete(row.orderId).then((res) => this.callbackFun(res))
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList(this.queryForm)
        this.list = data.list
        this.total = data.total
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style scoped>
  .table_list /deep/ .el-table__expanded-cell {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .table_list /deep/ .table_list_expand .el-table__header-wrapper th {
    background-color: #ffffff;
    padding: 2px 0;
    border: none;
  }
  .table_list /deep/ .table_list_expand .el-table__body-wrapper td {
    background-color: #ffffff;
    padding: 2px 0;
    border: none;
  }
</style>
